<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css" />
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=514e0f0c8bbbe9827cab6067bb25df00">
    </script>
    <style type="text/css">
        #panel {
            position: relative;
            background-color: white;
            max-height: 90%;
            overflow-y: auto;
            top: 10px;
            right: 10px;
            width: 280px;
        }

        #container {
            border: 2px solid black;
            position: relative;
            left: 100px;
            width: 500px;
            height: 500px;
        }
    </style>
</head>

<body>

    <!-- 46.使用第三方地图插件 获取当前的位置信息 ： 郑州市 郑东新区 白沙镇 -->
    <div id="container"></div>
    <div id="panel"></div>
    <input type="text" placeholder="请输入地址" id='address'>
    <button id='btn'>搜索</button>
</body>
<script>
    var map = new AMap.Map("container", {
        resizeEnable: true
    });
    document.getElementById("btn").onclick = function () {
        var address = document.getElementById("address");

        AMap.plugin(["AMap.PlaceSearch"], function () {
            var placeSearch = new AMap.PlaceSearch({
                pageSize: 5, 
                pageIndex: 1, 
                city: "", 
                citylimit: true, 
                map: map, 
                panel: "panel", 
                autoFitView: true 
            });
            placeSearch.search(address);
        });
    }
</script>

</html>